<template>
	<view class="all">
		<view class="name">
			<view>核销码 MC-1234-5678-9012</view>
			<view>车辆：奔驰FWE4/豫A98FHJ </view>
		</view>
		<view class="content">
			<view>服务内容</view>
			<view>
				<view>车辆精洗</view>
				<view>￥100</view>
			</view>
			<view>
				<view>车辆附加费用</view>
				<view>￥100</view>
			</view>
		</view>
		<view class="order">
			<view>订单信息</view>
			<view>
				<view>原价</view>
				<view>￥100</view>
			</view>
			<view>
				<view>优惠</view>
				<view class="preferential">-￥10</view>
			</view>
			<view>
				<view>实付金额</view>
				<view class="preferential">￥25.00</view>
			</view>
			<view>
				<view>订单编号</view>
				<view>1223233445</view>
			</view>
			<view>
				<view>预约时间</view>
				<view>2020-02-18 19:24:28 </view>
			</view>
			<view>
				<view>支付时间</view>
				<view>2020-02-18 19:24:28</view>
			</view>
			<view>
				<view>核销时间</view>
				<view>￥100</view>
			</view>
		</view>
		<button size="default" @click="showModal()" v-if="this.whether==true" class="btn">确认核销</button>
		<button size="default" class="btn1" v-if="this.whether!=true">已核销</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				whether: true,
			}
		},
		methods: {
			showModal() {
				let that = this
				uni.showModal({
					title: '核销此订单',
					content: '请您仔细核对订单，此操作不可撤销，请谨慎操作',
					success: function(res) {
						if (res.confirm) {
							console.log('核销')
							that.change()
						} else {
							console.log('取消')

						}
					}
				})
			},
			change() {
				this.whether = false
			}
		}
	}
</script>

<style>
	page {
		padding: 0 20rpx 20rpx 20rpx;
	}

	.all {
		height: 1624rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.name {
		width: 580rpx;
		font-size: 28rpx;
		font-weight: bolder;
		border: 1rpx solid rgba(239,239,239,1);
		margin-left: 50rpx;
		margin-top: 30rpx;
		padding: 0 10rpx;
	}

	.name>view {
		margin-top: 34rpx;
	}

	.content {
		width: 580rpx;
		font-size: 28rpx;
		border: 1rpx solid rgba(239,239,239,1);
		margin-left: 50rpx;
		padding: 0 10rpx;
	}

	.content> :nth-child(1) {
		font-weight: bolder;
		margin-top: 10rpx;
	}

	.content view {
		display: flex;
		margin-bottom: 2rpx;
		font-weight: bold;
		justify-content: space-between;
	}

	.order {
		margin-top: 20rpx;
		width: 580rpx;
		font-size: 28rpx;
		border: 1rpx solid rgba(239,239,239,1);
		margin-left: 50rpx;
		padding: 0 10rpx;
	}

	.order view {
		display: flex;
		margin-bottom: 2rpx;
		font-weight: bold;
		justify-content: space-between;
	}

	.preferential {
		color: red;
	}

	.btn {
		width: 428rpx;
		color: #F9F9F9;
		background-color: #0D7AF7;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		font-weight: bolder;
		margin-top: 200rpx;
	}

	.btn1 {
		width: 428rpx;
		color: #F9F9F9;
		background-color: #9A9A9A;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		font-weight: bolder;
		margin-top: 200rpx;
	}
</style>